<template>
	<div>
		<el-card shadow="hover">
			<el-form ref="searchForm" :inline="true" :model="searchForm">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="searchForm.username"></el-input>
				</el-form-item>
				<el-form-item label="姓名" prop="realname">
					<el-input v-model="searchForm.realname"></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="phone">
					<el-input v-model="searchForm.phone"></el-input>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-select v-model="searchForm.sex">
						<el-option :value="1">男</el-option>
						<el-option :value="2">女</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="searchForm.email"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="search">搜索</el-button>
					<el-button @click="resetSearchForm">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-table :data="userlist" stripe style="width: 100%">
			<el-table-column
				prop="username"
				label="用户名"
				width="245"
			></el-table-column>
			<el-table-column
				prop="realname"
				label="姓名"
				width="245"
			></el-table-column>
			<el-table-column prop="sex" label="性别" width="180">
				<template slot-scope="scope">
					{{ scope.row.sex == null ? " " : scope.row.sex == 1 ? "男" : "女" }}
				</template>
			</el-table-column>
			<el-table-column prop="phone" label="手机号"></el-table-column>
			<el-table-column prop="email" label="邮箱"></el-table-column>
			<el-table-column label="操作" width="170">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" @click="edit(scope.row)"
					>编辑
					</el-button
					>
					<el-popconfirm
						title="确定删除吗？"
						@confirm="deleteUser(scope.row.user_id)"
					>
						<el-button size="mini" type="danger" slot="reference"
						>删除
						</el-button
						>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			:page-size="listParams.pagesize"
			:total="listParams.total"
			:current-page="listParams.pagenum"
			@size-change="sizeChange"
			@current-change="currentChange"
		/>

		<!-- 编辑用户 -->
		<el-drawer
			title="编辑用户"
			:visible.sync="editDrawer"
			direction="rtl"
			:destroy-on-close="true"
			:before-close="editDrawerClose"
		>
			<el-form ref="editForm" :model="editForm" label-width="80px">
				<el-form-item label="用户名">
					<el-input readonly v-model="editForm.username"></el-input>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input v-model="editForm.phone"></el-input>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="editForm.realname"></el-input>
				</el-form-item>
				<el-form-item label="邮箱">
					<el-input v-model="editForm.email"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-radio v-model="editForm.sex" :label="1">男</el-radio>
					<el-radio v-model="editForm.sex" :label="2">女</el-radio>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="confirmEdit">确认</el-button>
					<el-button @click="resetForm('editForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</el-drawer>
	</div>
</template>

<script>
import pagination from "@/components/pagination.vue";

export default {
	name: "userlist",
	created () {
		this.getUserList();
	},
	components: {
		pagination,
	},
	data () {
		return {
			userlist: [],
			listParams: {
				pagesize: 10,
				pagenum: 1,
				total: 0,
			},
			editDrawer: false,
			editForm: {},
			searchForm: {
				username: '',
				realname: '',
				sex: '',
				phone: '',
				email: ''
			}
		};
	},
	methods: {
		async getUserList () {
			const { data } = await this.http({
				method: "post",
				url: "/api/userlist",
				data: { ...this.listParams, ...this.searchForm },
			});
			if (data.errno !== 0) {
				return this.msg({
					type: "error",
					message: "获取用户列表失败",
				});
			}
			this.userlist = data.data;
			this.listParams.total = data.total;
		},
		edit (data) {
			if (!data.sex) data.sex = 1;
			sessionStorage.setItem("editForm", JSON.stringify(data));
			this.editForm = { ...data };
			this.editDrawer = true;
		},
		editDrawerClose () {
			this.editDrawer = false;
			sessionStorage.removeItem("editForm");
		},
		async confirmEdit () {
			const { data } = await this.http({
				method: "post",
				url: "/admin/useredit",
				data: this.editForm,
			});
			if (data.errno !== 0) {
				return this.msg({
					type: "error",
					message: "编辑失败",
				});
			}
			this.msg({
				type: "success",
				message: data.message,
				onClose: () => {
					localStorage.setItem('USERINFO', JSON.stringify(this.editForm))
					this.getUserList();
					this.editDrawer = false;
				},
			});
		},
		resetForm () {
			this.editForm = JSON.parse(sessionStorage.getItem("editForm"));
		},
		async deleteUser (id) {
			const userinfo = JSON.parse(localStorage.getItem('USERINFO'))
			if (userinfo.user_id === id) {
				return this.msg({
					type: 'error',
					message: '这可是你自己的账号啊，不能删'
				})
			}
			const { data } = await this.http({
				method: "delete",
				url: "/api/userdel/" + id,
			});
			if (data.errno !== 0) {
				return this.msg({
					type: "error",
					message: "删除用户失败",
				});
			}
			this.msg({
				type: "success",
				message: "删除用户成功",
				onClose: () => {
					this.getUserList();
				},
			});
		},
		sizeChange (val) {
			this.listParams.pagesize = val;
			this.getUserList();
		},
		currentChange (val) {
			this.listParams.pagenum = val;
			this.getUserList();
		},
		search () {
			this.getUserList()
		},
		resetSearchForm () {
			this.$refs['searchForm'].resetFields()
			this.getUserList()
		},
	},
};
</script>

<style lang="less" scoped>
.el-pagination {
	margin-top: 20px;
}
</style>
